import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, HostListener } from '@angular/core';

@Component({
  selector: 'avt-clear-icon',
  template: `
    <svg class="clear-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" [ngStyle]="{ width: w, height: h}">
      <circle *ngIf="hasCircle" r="45" cx="50" cy="50" stroke-width="4" fill-opacity="0" [ngStyle]="{stroke: strokeColor}"></circle>
      <line x1="15" y1="50" x2="85" y2="50" stroke-width="8" [ngStyle]="{stroke: strokeColor}"></line>
      <line x1="50" y1="15" x2="50" y2="85" stroke-width="8" [ngStyle]="{stroke: strokeColor}"></line>
    </svg>
  `,
  styles: [
    `
      :host {
        display: inline-flex;
        justify-content: center;
        align-items: center;
      }
      svg line{
        transform: rotate(45deg);
        transform-origin: center;
      }
    `
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AvtClearIconComponent {

  @HostListener('click', ['$event'])
  iconClick(ev: MouseEvent) {
    ev.stopPropagation();
    this.deleteItem.emit();
  }

  @Input() hasCircle = true;
  @Input() w = '14px';
  @Input() h = '14px';
  @Input() strokeColor = '#546e95';
  @Output() deleteItem = new EventEmitter<void>();

}
